import React from "react";
import '../../index.css';

class Litilebtn extends React.Component{
  state = {
    litilebtn: []
  }
  render(){
    return(
      <div className="litilebtn">
        <div><a href="#"><img src={this.state.litilebtn.length > 0 && this.state.litilebtn[0]['imgSrc']} alt=""/></a></div>
        <div><a href="#"><img src={this.state.litilebtn.length > 0 && this.state.litilebtn[1]['imgSrc']} alt=""/></a></div>
        <div><a href="#"><img src={this.state.litilebtn.length > 0 && this.state.litilebtn[2]['imgSrc']} alt=""/></a></div>
        <div><a href="#"><img src={this.state.litilebtn.length > 0 && this.state.litilebtn[3]['imgSrc']} alt=""/></a></div>
        <div><a href="#"><img src={this.state.litilebtn.length > 0 && this.state.litilebtn[4]['imgSrc']} alt=""/></a></div>
        <div><a href="#"><img src={this.state.litilebtn.length > 0 && this.state.litilebtn[5]['imgSrc']} alt=""/></a></div>
        <div><a href="#"><img src={this.state.litilebtn.length > 0 && this.state.litilebtn[6]['imgSrc']} alt=""/></a></div>
        <div><a href="#"><img src={this.state.litilebtn.length > 0 && this.state.litilebtn[7]['imgSrc']} alt=""/></a></div>
        <div><a href="#"><img src={this.state.litilebtn.length > 0 && this.state.litilebtn[8]['imgSrc']} alt=""/></a></div>
        <div><a href="#"><img src={this.state.litilebtn.length > 0 && this.state.litilebtn[9]['imgSrc']} alt=""/></a></div>
      </div>
    )
  }
  componentDidMount() {
    fetch('http://localhost:3000/home', {
      headers: {
        "Content-Type" : "application/json"
      }
    })
    .then(response => {
      return response.json()
    })
    .then(res => {
      this.setState({
        litilebtn: res.goodsNav
      })
      console.log(res, this.state)
    })
  }
};

export default Litilebtn; 